<template>
  <!--待发布页面-->
  <div class="release">
    <!-- 头部 -->
    <van-nav-bar title="我的订单" left-arrow>
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->
    <van-tabs
      v-model:active="active"
      title-active-color="#000"
      title-inactive-color="#A4A4A4FF"
    >
      <van-tab title="全部">
        <div class="content">
          <van-icon
            size="115px"
            name="https://alipic.lanhuapp.com/psdb6179f93dfb5a37-d942-4010-807e-7f6f85c97e63"
          />
          <p>暂无货物</p>
        </div>
      </van-tab>
      <van-tab title="待付款">
        <div class="content">
          <van-icon
            size="115px"
            name="https://alipic.lanhuapp.com/psdb6179f93dfb5a37-d942-4010-807e-7f6f85c97e63"
          />
          <p>暂无订单</p>
        </div>
      </van-tab>
      <van-tab title="代发货">
        <div class="content">
          <van-icon
            size="115px"
            name="https://alipic.lanhuapp.com/psdb6179f93dfb5a37-d942-4010-807e-7f6f85c97e63"
          />
          <p>暂无代发货</p>
        </div>
      </van-tab>
      <van-tab title="待收货">
        <div class="content">
          <van-icon
            size="115px"
            name="https://alipic.lanhuapp.com/psdb6179f93dfb5a37-d942-4010-807e-7f6f85c97e63"
          />
          <p>暂无待收货</p>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="content">
          <van-icon
            size="115px"
            name="https://alipic.lanhuapp.com/psdb6179f93dfb5a37-d942-4010-807e-7f6f85c97e63"
          />
          <p>暂无</p>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 更多好物栏 -->
    <div class="more">
      <p class="more-title">
        <i></i>
        更多好物
      </p>
      <div class="more-l">
        <div class="m-l-top">
          <van-icon
            size="195px"
            name="https://alipic.lanhuapp.com/ps0d4753cf1658a43a-f45e-4756-b4d6-4cbfa7e44473"
          />
        </div>

        <div class="m-l-bott">
          <img src="../assets/LoginImg/4.webp" alt="" />
        </div>
      </div>
      <div class="more-r">
        <div class="m-l-top">
          <van-icon
            size="195px"
            name="https://alipic.lanhuapp.com/ps5dc2ed0c8b47fc79-233c-4266-b3a7-1f35b7363f33"
          />
        </div>

        <div class="m-l-bott">
          <img src="../assets/LoginImg/5.webp" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref(1);

    return { active };
  },
};
</script>

<style lang="less">
.release {
  //头部
  .van-nav-bar {
    .van-nav-bar__left {
      font-size: 20px;
    }
    .van-nav-bar__title {
      font: size 17px;
      font-weight: 900;
    }
  }
  //导航栏
  .van-tabs__nav {
    .van-tab__text {
      font-weight: 900;
    }
    .van-tabs__line {
      background-color: #ffb954ff;
      width: 22px;
      height: 4px;
    }
  }
  //内容区
  .van-tabs__content {
    .van-tab__pane {
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        margin: 40px 0;
        p {
          color: #a4a4a4ff;
          font-size: 12px;
          text-align: center;
          margin-top: 20px;
        }
      }
    }
  }
  //更多好物
  .more {
    .more-title {
      height: 25px;
      line-height: 25px;
      font-size: 17px;
      font-weight: 900;
      margin-bottom: 10px;
      i {
        display: inline-block;
        width: 6px;
        height: 100%;
        background-color: #ffc571ff;
        margin: 0 10px;
        vertical-align: middle;
      }
    }
    .more-l {
      display: inline-block;
      width: 48%;
      height: 295px;
      margin-left: 5px;
      .m-l-top {
        width: 100%;
        height: 60%;
      }
      .m-l-bott {
        width: 100%;
        height: 40%;
        background-color: beige;
        img {
          width: 100%;
        }
      }
    }
    .more-r {
      width: 48%;
      height: 295px;
      float: right;
      margin-right: 5px;
      .m-l-top {
        width: 100%;
        height: 60%;
      }
      .m-l-bott {
        width: 100%;
        height: 40%;
        background-color: beige;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
